// 设置画布
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

const para = document.querySelector('p');
// 生成随机数的函数

function random(min, max) {
	const num = Math.floor(Math.random() * (max - min)) + min;
	return num;
}

function randomColor() {
	return 'rgb(' +
		random(0, 255) + ', ' +
		random(0, 255) + ', ' +
		random(0, 255) + ')';
}

function Shape(x, y, velX, velY, exists) {
	this.x = x;
	this.y = y;
	this.velX = velX;
	this.velY = velY;
	this.exists = exists;
}

function Ball(x, y, velX, velY, exists, color, size) {
	Shape.call(this, x, y, velX, velY, exists);
	this.color = color;
	this.size = size;
}

Ball.prototype.draw = function() {
	ctx.beginPath();
	ctx.fillStyle = this.color;
	ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
	ctx.fill();
}

Ball.prototype.update = function() {
	if ((this.x + this.size) >= width) {
		this.velX = -(this.velX);
	}

	if ((this.x - this.size) <= 0) {
		this.velX = -(this.velX);
	}

	if ((this.y + this.size) >= height) {
		this.velY = -(this.velY);
	}

	if ((this.y - this.size) <= 0) {
		this.velY = -(this.velY);
	}

	this.x += this.velX;
	this.y += this.velY;

}

let balls = [];

let balls_count =300

while (balls.length < balls_count) {
	let size = random(10, 20);
	let ball = new Ball(
		// 球与画布距离
		random(0 + size, width - size),
		random(0 + size, height - size),
		random(-7, 7),
		random(-7, 7),
		true,
		randomColor(),
		size
	);
	balls.push(ball);
}

Ball.prototype.collisionDetect = function() {
	for (let j = 0; j < balls.length; j++) {
		if (this !== balls[j] && balls[j].exists === true) {
			const dx = this.x - balls[j].x;
			const dy = this.y - balls[j].y;
			const distance = Math.sqrt(dx * dx + dy * dy);

			if (distance < this.size + balls[j].size) {
				balls[j].color = this.color = randomColor();
			}
		}
	}
}

function EvilCircle(x, y, velX, velY, exists, color, size) {
	Shape.call(this, x, y, velX, velY, exists);
	this.color = color;
	this.size = size;
}

EvilCircle.prototype.draw = function() {
	ctx.beginPath();
	ctx.lineWidth =3;
	ctx.strokeStyle = this.color;
	ctx.arc(this.x, this.y, this.size, 0, 3 * Math.PI);
	ctx.stroke();
}
//设置按键
EvilCircle.prototype.checkBounds = function() {
	if ((this.x + this.size) >= width) {
		this.x -= this.size;
	}

	if ((this.x - this.size) <= 0) {
		this.x += this.size;
	}

	if ((this.y + this.size) >= height) {
		this.y -= this.size;
	}

	if ((this.y - this.size) <= 0) {
		this.y += this.size;
	}
}
//设置按键上下左右移动
EvilCircle.prototype.setControls = function() {
	window.onkeydown = e => {
		switch (e.key) {
			case 'a':
				this.x -= this.velX;
				break;
			case 'd':
				this.x += this.velX;
				break;
			case 'w':
				this.y -= this.velY;
				break;
			case 's':
				this.y += this.velY;
				break;
		}
	};
}

EvilCircle.prototype.collisionDetect = function() {
	for (let j = 0; j < balls.length; j++) {
		if (balls[j].exists === true) {
			const dx = this.x - balls[j].x;
			const dy = this.y - balls[j].y;
			const distance = Math.sqrt(dx * dx + dy * dy);

			if (distance < this.size + balls[j].size) {
				balls[j].exists = false;
				balls_count--;
				para.textContent = "还剩" + balls_count + "个球";
			}
		}
	}
}

let size =50;
evilcircle = new EvilCircle(random(0 + size, width - size),
	random(0 + size, height - size),
	10,
	10,
	true,
	"rgb(255,255,255)",
	size
);

function loop() {
	ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
	ctx.fillRect(0, 0, width, height);

	evilcircle.draw();
	evilcircle.setControls();
	evilcircle.checkBounds();
	evilcircle.collisionDetect();

	for (let i = 0; i < balls.length; i++) {
		if (balls[i].exists === true) {
			balls[i].draw();
			balls[i].update();
			balls[i].collisionDetect();
		}
	}

	requestAnimationFrame(loop);
}

loop();
